<template>
  <div class="allNow">
    <ul>
      <li v-for="item in list" :key="item.filmId" @click="goDetail(item.filmId)" class="item">
        <div class="imges1"><img :src="item.poster"></div>
        <div class="info">
         <span><i class="bigName">{{item.name}}</i>&nbsp;&nbsp;<i class="smallName">{{item.filmType.name}}</i></span>
         <span><i class="peoplesl">观众评分：</i><i class="peoplGrade">{{item.grade}}</i></span>
         <span>主演：{{item.actors | actorFilter}}</span>
         <span>{{item.nation}}&nbsp;|&nbsp;{{item.runtime}}分钟</span>
        </div>
        <div class="buy">购票</div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import {bus,EVENT_SCRLL_END} from '@/helper/bus_helper.js';
Vue.filter(
  "actorFilter",
  data=>data.map(actor=>actor.name).join(" ")  
)

export default {
  data() {
    return {
      list: [],
      total:1,
      pageNum:0,
      isLoading:false
    };
  },
  methods: {
    goDetail(filmId) {
      this.$router.push(`/Detail/${filmId}`);
    },
    loadData(){
      // 当数据已到达临界值或还正在加载中，则该情况下不允理会
      if(this.list.length >= this.total || this.isLoading){
        return ;
      }else{
        this.isLoading =true;
         this.pageNum++;
      this.$axios({
        url:`/gateway?cityId=440100&pageNum=${this.pageNum}&pageSize=10&type=1&k=4495415`,
        headers:{
         "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"16337815972401750006890497","bc":"440100"}',
         "X-Host": "mall.film-ticket.film.list",
        },
      })
      .then((res)=>{
        console.log('nowplaying res',res.data);
        this.list =this.list.concat(res.data.data.films);
        this.total =res.data.data.total;
        this.isLoading =false;
      })
      .catch(err=>{
        console.log('nowplaying err',err);
        this.isLoading =false;
      })
      }
     
    }
  }
  ,
  beforeMount(){
    bus.$on(EVENT_SCRLL_END,()=>{
      console.log('Nowplaying 开始加载数据...');
      this.loadData()
    })
  }
  ,
   mounted(){
      this.loadData()
    }
};
</script>

<style lang="scss" >

  .item{
    width: 100%;
    height: 94px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .imges1{
      width: 70px;
      height: 90%;
      display: flex;
      align-items: center;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .info{
      width: 155px;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      span{
        width: 100%;
        height: 20px;
        line-height: 20px;
        display: block;
      //  省略号
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        text-align: left;
        color: #797d82;
        font-size: 13px;
        i{
          font-style: normal;
        }
        .bigName{
           font-size: 14px;
           color: black;
        }
        .smallName{
          width: 13px;
          height: 9px;
          background-color: #d2d6dc;
          font-size: 9px;
          font-weight: bold;
          color: #fff;
        }
        // 
        .peoplGrade{
          color: #ffb232;
        }
      }
    }
    .buy{
      width: 50px;
      height: 25px;
      border: 1px solid #ff5f16;
      color: #ff5f16;
      border-radius: 3px;
      line-height: 25px;
    }
  }

  
</style>